<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px"
    class="page-tool"
  >
    <el-col>
      <div class="before" @click="addFn">
        <el-button size="small" type="primary">添加{{ btnName }}</el-button>
      </div>
    </el-col>
    <el-col v-if="showSearch">
      <el-row type="flex" justify="end">
        <!-- 插槽 -->
        <slot name="right" />
        <el-input
          v-model="searchKey"
          placeholder="请输入关键字"
          class="input-with-select"
          style="width: 300px"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchFn" />
        </el-input>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    btnName: {
      type: String,
      default: "内容",
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      searchKey: "",
    };
  },
  methods: {
    // 点击新增按钮
    addFn() {
      this.$emit("addEvent");
    },
    // 点击搜索按钮
    searchFn() {
      this.$emit("searchEvent");
    },
  },
};
</script>

<style lang="scss" scoped>
.before {
  width: 80px;
}
.page-tool {
  height: 60px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
</style>
